(_ => {
    //headLeftList遍历
    const headLeftList = document.querySelector('.head-left ul');
    const headLeftListData = {
        msg: 'headLeftListData',
        list: [
            {
                url: 'javascript:;', title: '首页',
                icon: `
            <?xml version="1.0" ?><svg class="feather feather-tv" fill="none" height="24"
                                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <rect height="15" rx="2" ry="2" width="20" x="2" y="7" />
                                <polyline points="17 2 12 7 7 2" />
                            </svg>
            `
            },
            { url: 'javascript:;', title: '番剧', },
            { url: 'javascript:;', title: '直播', },
            { url: 'javascript:;', title: '游戏中心', },
            { url: 'javascript:;', title: '会员购', },
            { url: 'javascript:;', title: '漫画', },
            { url: 'javascript:;', title: '赛事', },
            { url: 'javascript:;', title: 's13', },
            { url: 'javascript:;', title: '科学院', },
            {
                url: 'javascript:;', title: '下载客户端',
                icon: `
            <?xml version="1.0" ?><svg class="feather feather-download" fill="none" height="24"
                                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                <polyline points="7 10 12 15 17 10" />
                                <line x1="12" x2="12" y1="15" y2="3" />
                            </svg>
            `
            },

        ]
    };

    headLeftListData.list.forEach(item => {
        headLeftList.innerHTML += `
        <li>
            ${item.icon ? item.icon : ''}
            <a href="${item.url}">${item.title}</a>
        </li>`
    });

    //headRightList遍历
    const headRightList = document.querySelector('.head-right ul');
    const headRightListData = {
        msg: 'headRightListData',
        list: [
            { url: 'javascript:;', title: '登录' },
            {
                url: 'javascript:;', title: '大会员',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>
                    `
            },
            {
                url: 'javascript:;', title: '消息',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>
                    `
            },
            {
                url: 'javascript:;', title: '动态',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>
                    `
            },
            {
                url: 'javascript:;', title: '收藏',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>
                    `
            },
            {
                url: 'javascript:;', title: '历史',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>
                    `
            },
            {
                url: 'javascript:;', title: '创作中心',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>
                    `
            }
        ]
    };
    headRightListData.list.forEach(item => {
        headRightList.innerHTML += `
    <li>
        ${item.icon ?
                `<a href="${item.url}">
                ${item.icon}
                <span>${item.title}</span>
            </a>`:
                `<span>${item.title}</span>`
            }
    </li>`
    });

    //menu-center遍历
    const menuCenter = document.querySelector('.menu-center ul');
    const menuCenterListData = {
        msg: 'menuCenterListData',
        list: [
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' },
            { url: 'javascript:;', title: '热门' }
        ]
    };
    menuCenterListData.list.forEach(item => {
        menuCenter.innerHTML += `
        <li><a href="${item.url}">${item.title}</a></li>
    `
    });

    //menu-scrolling-center 遍历
    const menuScrollingCenter = document.querySelector('.menu-scrolling-center ul');
    menuCenterListData.list.forEach(item => {
        menuScrollingCenter.innerHTML += `
        <li><a href="${item.url}">${item.title}</a></li>`
    });
    //menu-right遍历
    const menuRight = document.querySelector('.menu-right ul');
    const menuRightListData = {
        msg: 'menuRightListData',
        list: [
            {
                url: 'javascript:;',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>`,
                title: '热门'
            },
            {
                url: 'javascript:;',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>`,
                title: '热门'
            },
            {
                url: 'javascript:;',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>`,
                title: '热门'
            },
            {
                url: 'javascript:;',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>`,
                title: '热门'
            },
            {
                url: 'javascript:;',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>`,
                title: '热门'
            },
            {
                url: 'javascript:;',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <line x1="12" x2="12.01" y1="17" y2="17" />
                    </svg>`,
                title: '热门'
            },
        ]
    };
    menuRightListData.list.forEach(item => {
        menuRight.innerHTML += `
    <li>
        <a href="${item.url}">
            ${item.icon}
            <span>${item.title}</span>
        </a>
    </li>`
    });

    //menu-scrolling-right 遍历
    const menuScrollingRight = document.querySelector('.menu-scrolling-right ul');
    menuRightListData.list.forEach(item => {
        menuScrollingRight.innerHTML += `
        <li><a href="${item.url}">${item.title}</a></li>`
    });

    //main遍历
    const mainSlideshow = document.querySelector('.box');
    const mainListData = {
        msg: 'mainListData',
        icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" />
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
            <line x1="12" x2="12.01" y1="17" y2="17" />
            </svg>`,
        list: [
            {
                video_url: 'javascript:;',
                up_space_url: 'javascript:;',
                video_title: 'TitleTesttestTitleTesttestTitleTesttest',
                date: '10-26',
                up: 'upup',
                playCount: '几万',
                admire: '10000',
                video_time: '10:00',
                video_image: 'https://dummyimage.com/600x400/ddd/fff&text=1'
            }
        ]
    };
    let temp = '';
    //测试20个数据
    const item = mainListData.list[0];
    new Promise((resolve, reject) => {
        for (let i = 0; i < 20; i++) {
            temp += `
            <li>
            <a class="video-show-info" href="${item.video_url}">
                <img src="${item.video_image}" alt="${item.video_title}">
                <div class="video-info-bottom">
                    <span>
                        ${mainListData.icon}
                        <span>${item.playCount}</span>
                        <span>
                            ${mainListData.icon}
                            <span>${item.admire}</span>
                        </span>
                    </span>
                    <span>${item.video_time}</span>
                </div>
            </a>
            <a href="${item.video_url}">
                ${item.video_title}
            </a>
            <div class="up-date">
                ${mainListData.icon}
                <span>
                    <a href="${item.up_space_url}">${item.up} · ${item.date}</a>
                </span>
            </div>
        </li>
        `;
        }
        resolve();
    }).then(_ => {
        mainSlideshow.outerHTML = temp
    })

    //footer-top left
    const footerTopLeft = document.querySelector('.footer-top ul:first-child')
    const footerTopFirstData = {
        msg: 'footerTopFirstData',
        logo: 'logo',
        list: [
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            }
        ]
    };
    footerTopFirstData.list.forEach((item, index) => {
        if (index === 0) {
            footerTopLeft.innerHTML += `
            <div>${footerTopFirstData.logo}</div>
        `
        } else {
            footerTopLeft.innerHTML += `
        <li>
            <a href="${item.url}">${item.title}</a>
        </li>`
        }
    });

    //footer-top center
    const footerTopCenter = document.querySelector('.footer-top ul:nth-child(2)')
    const footerTopCenterData = {
        msg: 'footerTopFirstData',
        logo: 'yyyy',
        list: [
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            },
            {
                url: 'javascript:;',
                title: 'xxx'
            }
        ]
    };
    footerTopCenterData.list.forEach((item, index) => {
        if (index === 0) {
            footerTopCenter.innerHTML += `
            <div>${footerTopCenterData.logo}</div>
        `
        } else {
            footerTopCenter.innerHTML += `
        <li>
            <a href="${item.url}">${item.title}</a>
        </li>`
        }
    });
    //footer-top right
    const footerTopRight = document.querySelector('.footer-top ul:last-child')
    const footerTopRightData = {
        msg: 'footerTopFirstData',
        list: [
            {
                url: 'javascript:;',
                title: 'xxxx',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <line x1="12" x2="12.01" y1="17" y2="17" />
                </svg>`
            },
            {
                url: 'javascript:;',
                title: 'xxxx',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <line x1="12" x2="12.01" y1="17" y2="17" />
                </svg>`
            },
            {
                url: 'javascript:;',
                title: 'xxxx',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <line x1="12" x2="12.01" y1="17" y2="17" />
                </svg>`
            },
            {
                url: 'javascript:;',
                title: 'xxxx',
                icon: `<?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <line x1="12" x2="12.01" y1="17" y2="17" />
                </svg>`
            },
        ]
    };
    footerTopRightData.list.forEach((item, index) => {
        footerTopRight.innerHTML += `
        <li>
            <a href="${item.url}">
                ${item.icon}
                <span>${item.title}</span>
            </a>
        </li>`
    });

    //slideshow 遍历
    const slideshowUl = document.querySelector('main ul .slideshow ul');
    const slideshowOl = document.querySelector('.slideshow .row-2 ol');
    const slideshowUlData = {
        msg: 'slideshowUlData',
        list: [
            {
                url: 'javascript:;',
                title: 'Titletitle1',
                image_url: 'https://dummyimage.com/600x400/ddd/fff&text=1',
                image_name: '1'
            },
            {
                url: 'javascript:;',
                title: 'Titletitle1',
                image_url: 'https://dummyimage.com/600x400/ddd/fff&text=2',
                image_name: '2'
            },
            {
                url: 'javascript:;',
                title: 'Titletitle1',
                image_url: 'https://dummyimage.com/600x400/ddd/fff&text=3',
                image_name: '3'
            },
            {
                url: 'javascript:;',
                title: 'Titletitle1',
                image_url: 'https://dummyimage.com/600x400/ddd/fff&text=4',
                image_name: '4'
            }
        ]
    }
    slideshowUlData.list.forEach(item => {
        slideshowUl.innerHTML += `
        <li>
            <a href="${item.url}">
                <img src="${item.image_url}" alt="${item.image_name}">
            </a>
        </li>`;
        slideshowOl.innerHTML += `<li></li>`;
    });
})()
